<template>
	<div id="HeaderBar">
		<img  src="../assets/img/菜单.png" class="headerImg" @click="isShow=!isShow" />
		<ul id="textUl">
			<li id="homeText" @click="A=true,B=false,C=false"><router-link to="/home">Home</router-link> </li>
			<li id="showText" @click="A=false,B=true,C=false"><router-link to="/show">Show</router-link></li>
			<li id="loginText" @click="A=dalse,B=false,C=true"><router-link to="/login">Login</router-link></li>
		</ul>
				
				
				
		<transition name="fadeInf">
			<div id="SideBar" v-show="isShow">
				<img src="../assets/img/关闭.png" id="closeSide" @click="isShow=!isShow"/>
			</div>
		</transition>
		<div class="main">
     <!-- 路由匹配到的组件将渲染在这里 -->
	        <transition>
	       		<router-view></router-view>
	       	</transition>	
     	</div>
	</div>
	
</template>

<script>
export default{
	data(){
	   	return{
	   		isShow:false
	   	}
	}
}
</script>

<style>
	#HeaderBar{
		width: 100%;
		height: 70px;
		background-color: white;
		position: fixed;
	}
	.headerImg{
		width: 32px;
		height: 32px;
		position: relative;
		top: 15px;
		left: 93%;
		cursor: pointer;
	}
	
	#textUl li{
		position: relative;
		display: inline;
		top: -17px;
		font-size: 23px;
		font-weight: 700;
		font-family: "微软雅黑";
	}
	#textUl li a{
		text-decoration:none;
		color: #515151;
	
	}
	#textUl li a:hover{
		color: grey;
	}
	#homeText{
		left: 5%;
	}
	#showText{
		left: 9%;
	}
	#loginText{
		left: 75%;
	}
	
    #SideBar{
		position: fixed;
		right: 0px;
		top: -80px;
		width: 300px;
		height: 113%;
		background-color: #515151;
		z-index: 10;
	}
	#closeSide{
		position: absolute;
		cursor: pointer;
		width: 30px;
		height: 30px;
		top: 100px;
		left: 25px;
	}

</style>